<template>
	<view :class="{ 'tui-input__border': inputBorder, 'tui-radius__fillet': isFillet }" :style="{ marginTop: marginTop + 'rpx' }" @tap="fieldClick">
		<view
			class="tui-input__wrap"
			:class="{
				'tui-line__left': lineLeft,
				'tui-border__top': !borderTop || inputBorder,
				'tui-border__bottom': !borderBottom || inputBorder,
				'tui-radius__fillet': isFillet
			}"
			:style="{ padding: padding, backgroundColor: backgroundColor }"
		>
			<!-- #ifdef APP-NVUE -->
			<view class="tui-input__required" v-if="required"><text :style="{ color: requiredColor }">*</text></view>
			<!-- #endif -->

			<!-- #ifndef APP-NVUE -->
			<view class="tui-input__required" v-if="required" :style="{ color: requiredColor }">*</view>
			<!-- #endif -->

			<view class="tui-input__label" :style="{ fontSize: labelSize + 'rpx', color: labelColor, minWidth: labelWidth + 'rpx' }" v-if="label">
				<text :style="{ fontSize: labelSize + 'rpx', color: labelColor }">{{ label }}</text>
			</view>
			<slot name="left"></slot>
			<input
				class="tui-input__self"
				:class="{ 'tui-text__right': textRight }"
				:style="{ fontSize: size + 'rpx', color: color }"
				placeholder-class="tui-input__placeholder"
				:type="type"
				:name="name"
				:value="inputVal"
				:password="password"
				:placeholder="placeholder"
				:placeholder-style="placeholderStyl"
				:disabled="disabled"
				:cursor-spacing="cursorSpacing"
				:maxlength="maxlength"
				:focus="focused"
				:confirm-type="confirmType"
				:confirm-hold="confirmHold"
				:cursor="cursor"
				:selection-start="selectionStart"
				:selection-end="selectionEnd"
				:adjust-position="adjustPosition"
				:hold-keyboard="holdKeyboard"
				:auto-blur="autoBlur"
				@focus="onFocus"
				@blur="onBlur"
				@input="onInput"
				@confirm="onConfirm"
				@keyboardheightchange="onKeyboardheightchange"
			/>
			<icon type="clear" :size="clearSize" :color="clearColor" v-if="clearable && value != ''" @tap.stop="onClear"></icon>
			<slot name="right"></slot>
		</view>
	</view>
</template>

<script setup>
import { ref, watch, nextTick, onBeforeMount, onMounted } from 'vue'

// 获取 emit
const emit = defineEmits(['update:modelValue', 'focus', 'blur', 'confirm', 'click', 'keyboardheightchange'])

const props = defineProps({
	//输入框名称
	name: {
		type: String,
		default: ''
	},
	//输入框值
	modelValue: {
		type: [Number, String],
		default: ''
	},
	//与官方input type属性一致
	type: {
		type: String,
		default: 'text'
	},
	password: {
		type: Boolean,
		default: false
	},
	//是否为必填项
	required: {
		type: Boolean,
		default: false
	},
	requiredColor: {
		type: String,
		default: '#EB0909'
	},
	//左侧标题
	label: {
		type: String,
		default: ''
	},
	//标题字体大小
	labelSize: {
		type: Number,
		default: 32
	},
	labelColor: {
		type: String,
		default: '#333'
	},
	//label 最小宽度 rpx
	labelWidth: {
		type: Number,
		default: 140
	},
	clearable: {
		type: Boolean,
		default: false
	},
	//px
	clearSize: {
		type: Number,
		default: 15
	},
	clearColor: {
		type: String,
		default: '#bfbfbf'
	},
	//获取焦点
	focus: {
		type: Boolean,
		default: false
	},
	placeholder: {
		type: String,
		default: ''
	},
	placeholderStyle: {
		type: String,
		default: ''
	},
	disabled: {
		type: Boolean,
		default: false
	},
	maxlength: {
		type: [Number, String],
		default: 140
	},
	cursorSpacing: {
		type: Number,
		default: 0
	},
	confirmType: {
		type: String,
		default: 'done'
	},
	confirmHold: {
		type: Boolean,
		default: false
	},
	cursor: {
		type: Number,
		default: -1
	},
	selectionStart: {
		type: Number,
		default: -1
	},
	selectionEnd: {
		type: Number,
		default: -1
	},
	adjustPosition: {
		type: Boolean,
		default: true
	},
	holdKeyboard: {
		type: Boolean,
		default: false
	},
	autoBlur: {
		type: Boolean,
		default: false
	},
	//输入框字体大小 rpx
	size: {
		type: Number,
		default: 32
	},
	//输入框字体颜色
	color: {
		type: String,
		default: '#333'
	},
	// 是否显示 input 边框
	inputBorder: {
		type: Boolean,
		default: false
	},
	//input是否显示为圆角
	isFillet: {
		type: Boolean,
		default: false
	},
	// 是否显示上边框
	borderTop: {
		type: Boolean,
		default: false
	},
	// 是否显示下边框
	borderBottom: {
		type: Boolean,
		default: true
	},
	//下边框线条是否有左偏移距离
	lineLeft: {
		type: Boolean,
		default: true
	},
	// 是否自动去除两端的空格
	trim: {
		type: Boolean,
		default: true
	},
	textRight: {
		type: Boolean,
		default: false
	},
	//输入框padding值
	padding: {
		type: String,
		default: '26rpx 30rpx'
	},
	//输入框背景颜色
	backgroundColor: {
		type: String,
		default: '#FFFFFF'
	},
	//输入框margin-top值 rpx
	marginTop: {
		type: Number,
		default: 0
	}
})

const placeholderStyl = ref('')
const focused = ref(false)
const inputVal = ref('')

watch(
	() => props.focus,
	nVal => {
		nextTick(() => {
			focused.value = nVal
		})
	}
)

watch(
	() => props.placeholderStyle,
	nVal => {
		fieldPlaceholderStyle()
	}
)

watch(
	() => props.modelValue,
	nVal => {
		inputVal.value = nVal
	}
)

onBeforeMount(() => {
	inputVal.value = props.modelValue
	fieldPlaceholderStyle()
})

onMounted(() => {
	nextTick(() => {
		// #ifdef MP-TOUTIAO
		setTimeout(() => {
			focused.value = props.focus
		}, 300)
		// #endif

		// #ifndef MP-TOUTIAO
		setTimeout(() => {
			focused.value = props.focus
		}, 120)
		// #endif
	})
})

const fieldPlaceholderStyle = () => {
	if (props.placeholderStyle) {
		placeholderStyl.value = props.placeholderStyle
	} else {
		const size = uni.upx2px(props.size)
		placeholderStyl.value = `fontSize:${size}px`
	}
}

const onInput = event => {
	let value = event.detail.value
	if (props.trim) value = trimStr(value)
	emit('update:modelValue', value)
}

const onFocus = event => {
	emit('focus', event)
}

const onBlur = event => {
	emit('blur', event)
}

const onConfirm = event => {
	emit('confirm', event)
}

const onClear = event => {
	uni.hideKeyboard()
	inputVal.value = ''
	emit('update:modelValue', '')
}

const fieldClick = () => {
	emit('click', {
		name: props.name
	})
}

const onKeyboardheightchange = event => {
	emit('keyboardheightchange', event.detail)
}

const trimStr = str => {
	return str.replace(/^\s+|\s+$/g, '')
}
</script>

<style lang="scss" scoped>
.tui-input__wrap {
	/* #ifndef APP-NVUE */
	width: 100%;
	box-sizing: border-box;
	display: flex;
	/* #endif */
	flex-direction: row;
	flex: 1;
	align-items: center;
	position: relative;

	/* #ifdef APP-NVUE */
	border-top-width: 0.5px;
	border-top-style: solid;
	border-top-color: rgba(0, 0, 0, 0.1);
	border-bottom-width: 0.5px;
	border-bottom-style: solid;
	border-bottom-color: rgba(0, 0, 0, 0.1);
	padding: 26rpx 30rpx;
	/* #endif */
}

/* #ifndef APP-NVUE */
.tui-input__wrap::before {
	content: ' ';
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	border-top: 1px solid rgba(0, 0, 0, 0.1);
	transform: scaleY(0.5);
	transform-origin: 0 0;
	z-index: 2;
	pointer-events: none;
}

.tui-input__wrap::after {
	content: ' ';
	position: absolute;
	border-bottom: 1px solid rgba(0, 0, 0, 0.1);
	transform: scaleY(0.5);
	transform-origin: 0 100%;
	bottom: 0;
	right: 0;
	left: 0;
	z-index: 2;
	pointer-events: none;
}

.tui-line__left::after {
	left: 30rpx !important;
}

.tui-border__top::before {
	border-top: 0;
}

.tui-border__bottom::after {
	border-bottom: 0;
}

/* #endif */

/* #ifdef APP-NVUE */
.tui-border__top {
	border-top-width: 0;
}

.tui-border__bottom {
	border-bottom-width: 0;
}

/* #endif */
.tui-input__required {
	position: absolute;
	left: 12rpx;
	/* #ifndef APP-NVUE */
	height: 30rpx;
	top: 50%;
	transform: translateY(-50%);
	line-height: 1.15;
	/* #endif */
	/* #ifdef APP-NVUE */
	flex: 1;
	align-items: center;
	justify-content: center;
	line-height: 1;
	/* #endif */
}

.tui-input__label {
	padding-right: 12rpx;
	/* #ifndef APP-NVUE */
	flex-shrink: 0;
	/* #endif */
}

.tui-input__self {
	flex: 1;
	padding-right: 12rpx;
	/* #ifndef APP-NVUE */
	box-sizing: border-box;
	overflow: visible;
	/* #endif */
	background-color: transparent;
}

.tui-input__placeholder {
	/* #ifndef APP-NVUE */
	color: #ccc;
	overflow: visible;
	/* #endif */
	/* #ifdef APP-NVUE */
	color: #ccc;
	font-size: 32rpx;
	/* #endif */
}

/* #ifdef MP */
.tui-input__placeholder {
	color: #ccc;
	overflow: visible;
}
/* #endif */

.tui-input__border {
	border-radius: 4rpx;
	position: relative;
	/* #ifdef APP-NVUE */
	border-style: solid;
	border-width: 0.5px;
	border-color: #d1d1d1;
	/* #endif */
	/* #ifndef APP-NVUE */
	border-width: 0;
	/* #endif */
}

/* #ifndef APP-NVUE */
.tui-input__border::after {
	content: ' ';
	position: absolute;
	height: 200%;
	width: 200%;
	border: 1px solid #d1d1d1;
	transform-origin: 0 0;
	transform: scale(0.5);
	left: 0;
	top: 0;
	border-radius: 8rpx;
	pointer-events: none;
}

.tui-radius__fillet::after {
	border-radius: 100px !important;
}

/* #endif */
.tui-radius__fillet {
	border-radius: 100px !important;
}

.tui-text__right {
	text-align: right;
}
</style>
